<%@ page import="com.fjrcloud.entity.Land" %>
<%@ page import="com.fjrcloud.entity.Formalities" %>
<%@ page import="com.fjrcloud.entity.PriceType" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>土地认定标准</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${path}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${path}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${path}/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${path}/css/animate.css" rel="stylesheet">
    <link href="${path}/css/style.css?v=4.1.0" rel="stylesheet">

    <style>
        .complete {
            background-color: #1ab394;
            color: #FFFFFF;
        }
        .incomplete {
            background-color: #f8ac59;
            color: #FFFFFF;
        }

        .folder-list li a{
            display: inline-block;
        }
        .folder-list li a.on{
            color: #2ea8e5;
        }
        .folder-list li .btn-panel{
            float: right;
            display: inline-block;
        }
        .folder-list li .btn-panel>i{
            cursor: pointer;
            line-height: 25px;
        }
        .folder-list li .btn-panel .updateStructures{
            color: #f7a54a;
        }
        .folder-list li .btn-panel .deleteStructures{
            color: #ed5565;
        }
        .list-group .list-group-item{
            cursor: pointer;
            text-indent: 2em;
        }
        .list-group .list-group-item>i{
            display: initial;
            margin-right: 0.5em;
        }
        .list-group .list-group-item .pull-right{
            margin-right: 2em;
        }
        .list-group .list-group-item:hover{
            background: rgb(231,244,249);
        }
    </style>
</head>

<c:set var="clearing" value="<%=Land.clearing %>"/>
<c:set var="building" value="<%=Land.building %>"/>

<c:set var="compensate" value="<%=PriceType.compensate %>"/>
<c:set var="impose" value="<%=PriceType.impose %>"/>

<body class="gray-bg">

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <strong>埕地空地</strong>
                            <ul class="list-group clear-list" style="margin-bottom: 0;">
                                <li class="list-group-item fist-item land-identified-standard" data-class="${clearing}"><i class="fa fa-gears"></i>标准管理</li>
                            </ul>
                            <div class="hr-line-dashed"></div>
                            <strong>建筑用地</strong>
                            <ul class="list-group clear-list" style="margin-bottom: 0;">
                                <c:set var="enumValues" value="<%=Formalities.values() %>"/>
                                <c:forEach items="${enumValues}" var="enumValue">
                                    <li class="list-group-item fist-item land-identified-standard" data-class="${building}" data-class-formalities="${enumValue }"><i class="fa fa-gears"></i>${enumValue.label }</li>
                                </c:forEach>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <strong>低价设置</strong>
                            <ul class="list-group clear-list">
                                <li class="list-group-item fist-item price " data-id="${compensatePrice.id}">
                                    <i class="fa fa-money"></i>${compensate.label }（${compensatePrice.price}/m²）
                                </li>
                                <li class="list-group-item price" data-id="${imposePrice.id}">
                                    <i class="fa fa-money"></i>${impose.label }（${imposePrice.price}/m²）
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>标准管理</h5>
                        <div class="ibox-tools">
                            <button class="btn btn-primary btn-xs add" style="display: none;">创建</button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="project-list">
                            <table class="table table-hover"><tbody></tbody></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="${path}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${path}/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${path}/js/plugins/layer/layer.min.js"></script>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <!-- 自定义js -->
    <script src="${path}/js/content.js?v=1.0.0"></script>
    <script src="../js/jquery.form.js"></script>


    <script>

        function updateHtml(type,formalities) {

            var input = {
                '${clearing}':'\
                    <div class="form-group">\
                        <label class="col-sm-2 control-label">计算方式：</label>\
                        <div class="col-sm-10">\
                            <div class="input-group m-b">\
                                <span class="input-group-addon"><input type="radio" name="pattern" value="1" checked></span>\
                                <span class="input-group-addon" style="border-right: 0;">按照土地补偿价的</span>\
                                <input type="number" class="form-control" name="ratio">\
                                <span class="input-group-addon">% &nbsp;&nbsp; 计算</span>\
                            </div>\
                            <div class="input-group m-b">\
                                <span class="input-group-addon"><input type="radio" name="pattern" value="0"></span>\
                                <span class="form-control">按照征地价计算</span>\
                            </div>\
                        </div>\
                    </div>',
                '${building}':'\
                <div class="form-group">\
                    <label class="col-sm-2 control-label">计算方式：</label>\
                    <div class="col-sm-10">\
                        <div class="input-group m-b">\
                            <span class="input-group-addon"><input type="radio" name="pattern" value="1" checked></span>\
                            <span class="input-group-addon" style="border-right: 0;">按房屋占地及建筑面积的</span>\
                            <input type="number" class="form-control" name="ratio">\
                            <span class="input-group-addon">% &nbsp;&nbsp; 认定补偿安置面积</span>\
                        </div>\
                        <div class="input-group m-b">\
                            <span class="input-group-addon"><input type="radio" name="pattern" value="0"></span>\
                            <span class="form-control">视实际情况给予一次性搬迁补助</span>\
                        </div>\
                    </div>\
                </div>'
            }

            var html ='\
                    <div class="ibox-content" style="overflow: hidden;height: 100%;">\
                        <form class="form-horizontal" method="post">\
                            <input type="text" name="id" style="display: none;">\
                            <input type="text" name="type" style="display: none;" value="'+type+'">\
                            <input type="text" name="formalities" style="display: none;" value="'+($.isEmptyObject(formalities)?'':formalities)+'">\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">名称：</label>\
                                <div class="col-sm-10"><input type="text" class="form-control" name="name"></div>\
                            </div>'+input[type]+'\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">描述：</label>\
                                <div class="col-sm-10">\
                                    <textarea class="form-control" style="resize:none" name="description"></textarea>\
                                </div>\
                            </div>\
                        </form>\
                    </div>';

            return html;
        }
        function updatePriceHtml() {
            var html ='\
                    <div class="ibox-content" style="overflow: hidden;height: 100%;">\
                        <form class="form-horizontal" method="post">\
                            <input type="text" name="id" style="display: none;">\
                            <input type="text" name="type" style="display: none;">\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">单价：</label>\
                                <div class="col-sm-10">\
                                    <div class="input-group">\
                                        <input type="number" min=0 class="form-control" name="price">\
                                        <span class="input-group-addon">/m²</span>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">描述：</label>\
                                <div class="col-sm-10">\
                                    <textarea class="form-control" style="resize:none" name="description"></textarea>\
                                </div>\
                            </div>\
                        </form>\
                    </div>';

            return html;
        }

        function refreshTableHtml(type,param) {

            $('table tbody').html('');

            var url = {
                '${clearing}':'${path}/api/land/standard/clearing/list',
                '${building}':'${path}/api/land/standard/building/list',
            };
            var content = {
                '${clearing}':{
                    radio:'按照土地补偿价的#radio#%计算',
                    other:'按照征地价计算'
                },
                '${building}':{
                    radio:'按房屋占地及建筑面积的#radio#%认定补偿安置面积',
                    other:'视实际情况给予一次性搬迁补助'
                }
        }

            $.post(
                url[type],param,
                function (result) {
                    if (result.code == "${result_success}") {

                        $(result.data.content).each(function () {

                            var text = this.pattern?content[type].radio.replace('#radio#',this.ratio):content[type].other;

                            var html = '\
                                <tr data-id="'+this.id+'">\
                                    <td class="project-title"><span>'+this.name+'</span></td>\
                                    <td class="project-completion"><small>'+text+'</small></td>\
                                    <td class="project-actions">\
                                        <a href="#" class="btn btn-white btn-sm delete"><i class="fa fa-trash"></i> 删除 </a>\
                                        <a href="#" class="btn btn-white btn-sm update"><i class="fa fa-pencil"></i> 编辑 </a>\
                                    </td>\
                                </tr>';

                            $('table tbody').append(html);
                        });

                    } else {
                        layer.msg(result.data);
                    }
                },
                'json');
        }

        function init(type,formalities) {

            var title = {
                '${clearing}':'埕地空地 标准管理',
                '${building}':{
                <c:set var="enumValues" value="<%=Formalities.values() %>"/>
                <c:forEach items="${enumValues}" var="enumValue">
                    ${enumValue }:'建筑用地 > ${enumValue.label } 标准管理',
                </c:forEach>
                }
            }

            $('table').attr('data-class',type);
            $('table').attr('data-class-formalities',formalities);
            $('.add').show();
            $('table').parents('.ibox').find('.ibox-title h5').text(typeof title[type] === 'string'? title[type]:title[type][formalities]);
            refreshTableHtml(type,{formalities:formalities});
        }

        $(document).ready(function(){

            $('.land-identified-standard').click(function () {
                init($(this).attr('data-class'),$(this).attr('data-class-formalities'));
            });
            $('.price').click(function () {

                var el = this;

                var title = {
                    ${compensate}:'${compensate.label}',
                    ${impose}:'${impose.label}'
                }

                $.post(
                    '${path}/api/price/get',
                    {id:$(this).attr('data-id')},
                    function (result) {
                        if (result.code == "${result_success}") {

                            layer.open({
                                title:title[result.data.type],
                                type: 1,
                                area: ['600px','auto'],
                                content: updatePriceHtml(),
                                btn:['保存','取消'],
                                success:function (layero, index) {
                                    $(layero).find('input[name="id"]').val(result.data.id);
                                    $(layero).find('input[name="type"]').val(result.data.type);
                                    $(layero).find('input[name="price"]').val(result.data.price);
                                    $(layero).find('input[name="description"]').val(result.data.description);
                                },
                                yes: function(index, layero){

                                    var options ={
                                        type: "post",
                                        url: "${path}/api/price/save",
                                        dataType: "json",
                                        uploadProgress: function (event, position, total, percentComplete) {},
                                        success: function (result) {
                                            if (result.code == "${result_success}") {
                                                $(el).html('<i class="fa fa-money"></i>'+title[result.data.type]+'（'+result.data.price+'/m²）');
                                                layer.msg("保存成功");
                                                layer.close(index);
                                            }else {
                                                layer.msg(result.data);
                                            }
                                        }
                                    };

                                    $(layero).find('form').ajaxSubmit(options);
                                }
                            });

                        }else{
                            layer.msg(result.data);
                        }
                    },'json');
            });

            $('.add').click(function () {

                var type = $('table').attr('data-class');
                var formalities = $('table').attr('data-class-formalities')
                layer.open({
                    type: 1,
                    area: ['600px','auto'],
                    content: updateHtml(type,formalities),
                    btn:['保存','取消'],
                    success:function (layero, index) {},
                    yes: function(index, layero){

                        var options ={
                            type: "post",
                            url: "${path}/api/land/standard/save",
                            dataType: "json",
                            uploadProgress: function (event, position, total, percentComplete) {},
                            success: function (result) {
                                if (result.code == "${result_success}") {
                                    refreshTableHtml(type,{formalities:formalities});
                                    layer.msg("保存成功");
                                    layer.close(index);
                                }else {
                                    layer.msg(result.data);
                                }
                            }
                        };

                        $(layero).find('form').ajaxSubmit(options);
                    }
                });
            });

            $('table tbody').on('click','.update',function () {

                var id = $(this).parents('tr').attr('data-id');
                var type = $('table').attr('data-class');
                var formalities = $('table').attr('data-class-formalities');

                $.post(
                    "${path}/api/land/standard/get",
                    {id:id},
                    function (result) {
                        if (result.code == "${result_success}") {

                            layer.open({
                                type: 1,
                                area: ['600px','auto'],
                                content: updateHtml(type,formalities),
                                btn:['保存','取消'],
                                success:function (layero, index) {

                                    $(layero).find('input[name="id"]').val(result.data.id);
                                    $(layero).find('input[name="name"]').val(result.data.name);
                                    $(layero).find('input[name="pattern"][value='+(result.data.pattern?1:0)+']').attr('checked',true);
                                    $(layero).find('input[name="ratio"]').val(result.data.ratio);
                                    $(layero).find('textarea[name="description"]').val(result.data.description);

                                },
                                yes: function(index, layero){

                                    var options ={
                                        type: "post",
                                        url: "${path}/api/land/standard/save",
                                        dataType: "json",
                                        uploadProgress: function (event, position, total, percentComplete) {},
                                        success: function (result) {
                                            if (result.code == "${result_success}") {
                                                refreshTableHtml(type,{formalities:formalities});
                                                layer.msg("保存成功");
                                                layer.close(index);
                                            }else {
                                                layer.msg(result.data);
                                            }
                                        }
                                    };

                                    $(layero).find('form').ajaxSubmit(options);

                                    layer.close(index);
                                }
                            });
                        }else {
                            layer.msg(result.data);
                        }
                    },
                    'json'
                );
            });

            $('table tbody').on('click','.delete',function () {

                var type = $('table').attr('data-class');
                var formalities = $('table').attr('data-class-formalities');
                var id = $(this).parents('tr').attr('data-id');

                $.post(
                    "${path}/api/land/standard/del",
                    {id:id},
                    function (result) {
                        if (result.code == "${result_success}") {
                            refreshTableHtml(type,{formalities:formalities});
                            layer.msg("删除成功！");
                        }else {
                            layer.msg(result.data);
                        }
                    },
                    'json'
                );
            });

        });

    </script>

    </body>
</html>
